<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <script src="js/jquery-3.1.1.js"></script>
    <title>练习</title>
    <style>
        body{
            margin: 0;
            font-family: '楷体';
        }
        main{
            width: 594px;
            margin: 30px auto;
            border: 1px solid #ccc;
            user-select: none;
        }
        main .title{
            width: 594px;
            height: 35px;
            background-image: url('btn_cartoon.gif');
            background-position: 0 0;
        }
        .title .cartong{
            display: inline-block;
            width: 86px;
            height: 35px;
            background-image: url('btn_cartoon.gif');
            background-position: 0 -100px;
        }
        .title .page{
            display: inline-block;
            width: 10px;
            height: 10px;
            background-image: url('btn_cartoon.gif');
            background-position: 0 -320px;
            margin-bottom: 10px;
        }
        .title .btn{
            display: inline-block;
            width: 30px;
            height: 23px;
            background-image: url('btn_cartoon.gif');
            margin-bottom: 6px;
        }
        .title .left{
            background-position: 0 -401px; 
        }
        .title .right{
            background-position: -30px -401px;
            position: relative;
            left: -8px;
        }
        .title .more{
            float: right;
            color: #04aef4;
            font-size: 12px;
            margin-top: 10px;
            margin-right: 10px;
        }
        a{
            text-decoration: none;
            color: #04aef4;
        }
        a:hover{
            text-decoration: underline;
            color: red;
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .content{
            width: 594px;
            margin: 20px 0;
            position: relative;
            height: 148px;
            overflow: hidden;
        }
        ul{
            width: 400%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .clearfix::after{
            content: '';
            height: 0;
            display: block;
            clear: both;
            visibility: hidden;
        }
        .clearfix{
            zoom: 1;
        }
        ul li{
            float: left;
            width: 594px;
            display: flex;
            justify-content: space-between;
        }
        ul li .box{
            display: inline-block;
            width: 128px;
            margin: 0 10px;
        }
        ul li .box span{
            display: block;
            font-size: 14px;
        }
        .box .name{
            margin-top: 10px;
            margin-bottom: 5px;
        }
        .title .active{
            background-position: 0 -220px;
        }
    </style>
</head>

<body>
    <main>
        <div class="title">
            <span class="cartong"></span>
            <span class="page active"></span>
            <span class="page"></span>
            <span class="page"></span>
            <span class="page"></span>
            <span class="btn left"></span>
            <span class="btn right"></span>
            <span class="more"><em><a href="#">更多>></a></em></span>
        </div>
        <div class="content">
            <ul class="clearfix">
                <li class="current">
                    <div class="box">
                        <img src="01.jpg" alt="">
                        <span class="name"><a href="#">海贼王</a></span>
                        <span class="count">播放:28,276</span>
                    </div>
                    <div class="box">
                        <img src="01.jpg" alt="">
                        <span class="name"><a href="#">海贼王</a></span>
                        <span class="count">播放:28,276</span>
                    </div>
                    <div class="box">
                        <img src="01.jpg" alt="">
                        <span class="name"><a href="#">海贼王</a></span>
                        <span class="count">播放:28,276</span>
                    </div>
                    <div class="box">
                        <img src="01.jpg" alt="">
                        <span class="name"><a href="#">海贼王</a></span>
                        <span class="count">播放:28,276</span>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="02.jpg" alt="">
                        <span class="name"><a href="#">哆啦A梦</a></span>
                        <span class="count">播放:33,326</span>
                    </div>
                    <div class="box">
                        <img src="02.jpg" alt="">
                        <span class="name"><a href="#">哆啦A梦</a></span>
                        <span class="count">播放:33,326</span>
                    </div>
                    <div class="box">
                        <img src="02.jpg" alt="">
                        <span class="name"><a href="#">哆啦A梦</a></span>
                        <span class="count">播放:33,326</span>
                    </div>
                    <div class="box">
                        <img src="02.jpg" alt="">
                        <span class="name"><a href="#">哆啦A梦</a></span>
                        <span class="count">播放:33,326</span>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="03.jpg" alt="">
                        <span class="name"><a href="#">火影忍者</a></span>
                        <span class="count">播放:28,276</span>
                    </div>
                    <div class="box">
                        <img src="03.jpg" alt="">
                        <span class="name"><a href="#">火影忍者</a></span>
                        <span class="count">播放:28,276</span>
                    </div>
                    <div class="box">
                        <img src="03.jpg" alt="">
                        <span class="name"><a href="#">火影忍者</a></span>
                        <span class="count">播放:28,276</span>
                    </div>
                    <div class="box">
                        <img src="03.jpg" alt="">
                        <span class="name"><a href="#">火影忍者</a></span>
                        <span class="count">播放:28,276</span>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <img src="04.jpg" alt="">
                        <span class="name"><a href="#">龙珠</a></span>
                        <span class="count">播放:57,865</span>
                    </div>
                    <div class="box">
                        <img src="04.jpg" alt="">
                        <span class="name"><a href="#">龙珠</a></span>
                        <span class="count">播放:57,865</span>
                    </div>
                    <div class="box">
                        <img src="04.jpg" alt="">
                        <span class="name"><a href="#">龙珠</a></span>
                        <span class="count">播放:57,865</span>
                    </div>
                    <div class="box">
                        <img src="04.jpg" alt="">
                        <span class="name"><a href="#">龙珠</a></span>
                        <span class="count">播放:57,865</span>
                    </div>
                </li>
            </ul>
        </div>
    </main>
</body>
<html>
<script>
    $(function(){
        var length=$('.page').length;
        var currrentIndex=$('.active').index()-1;
        var w=$('.content').width();
        $('.left').click(function(){
            currrentIndex--;
            if(currrentIndex<0){
                currrentIndex=3;
            }
            show();
        });
        $('.right').click(function(){
            currrentIndex++;
            if(currrentIndex>=length){
                currrentIndex=0;
            }
            show();
        });
        function show(){
            $('.content ul').stop().animate({left:-w*currrentIndex},500);
            $('.title .page').eq(currrentIndex).addClass('active').siblings().removeClass('active');
        }
    })
</script>